<template>
  <div>
    <!-- <h3>当前最新的count值为:{{ count }}</h3> -->
    <h3>{{ showNum }}</h3>
    <button @click="btnHandler1">-1</button>
    <button @click="subN(3)">-N</button>
    <!-- 异步减一 -->
    <button @click="subAsync">-1 Async</button>
    <button @click="subNAsync(5)">-N Async</button>
  </div>
</template>

<script>
// 导入mapState访问State中的数据，
// 导入mapMutations访问Mutations中的函数,
// 导入mapAction访问Actions中的函数
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  data() {
    return {}
  },
  // 导入mapMutations函数,将需要的mutations函数映射为当前组件的methods方法
  methods: {
    ...mapMutations(['sub', 'subN']),
    // 将全局的subAsync方法映射成当前组件的Async函数
    ...mapActions(['subAsync', 'subNAsync']),
    btnHandler1() {
      this.sub()
    },
    // 可以直接在click当中调用action函数
    // btnHandler2() {
    //   this.subN(3)
    // },
    // 异步让 count 自减 -1
    // btnHandler3() {
    //   this.subAsync()
    // },
    // btnHandler4() {
    //   this.subNAsync(5)
    // },
  },
  computed: {
    ...mapState(['count']), // 三个点表示展开运算符
    ...mapGetters(['showNum']),
  },
}
</script>
